<template>
  <div class="app-container">
    <div class="demo-section">
      <h2>AI Tiptap 编辑器组件演示</h2>
      <p>这是一个集成了 AI 功能的 Tiptap 富文本编辑器组件，移植了 Tinymce 中的 AI 快捷功能。</p>

      <div class="demo-item">
        <h3>基础使用</h3>
        <a-i-tiptap
          v-model="content1"
          :height="300"
          :show-toolbar="true"
          :show-ai-toolbar="true"
          ai-app="content"
        />
        <div class="content-preview">
          <h4>内容预览：</h4>
          <div v-html="content1" />
        </div>
      </div>

      <div class="demo-item">
        <h3>仅 AI 工具栏</h3>
        <a-i-tiptap
          v-model="content2"
          :height="200"
          :show-toolbar="false"
          :show-ai-toolbar="true"
          ai-app="content"
        />
      </div>

      <div class="demo-item">
        <h3>仅标准工具栏</h3>
        <a-i-tiptap
          v-model="content3"
          :height="200"
          :show-toolbar="true"
          :show-ai-toolbar="false"
        />
      </div>

      <div class="demo-item">
        <h3>自定义高度</h3>
        <a-i-tiptap
          v-model="content4"
          :height="400"
          :show-toolbar="true"
          :show-ai-toolbar="true"
          ai-app="article"
        />
      </div>

      <div class="feature-list">
        <h3>主要功能特性：</h3>
        <ul>
          <li><strong>AI 助手：</strong>完整的 AI 对话和内容生成功能</li>
          <li><strong>AI 重写：</strong>选中文本后点击按钮进行智能重写</li>
          <li><strong>段落扩写：</strong>自动扩展段落内容，增加细节</li>
          <li><strong>重复检测：</strong>检测文档中的重复内容并提供修改建议</li>
          <li><strong>AI 搜图：</strong>基于选中文本搜索相关图片（开发中）</li>
          <li><strong>富文本编辑：</strong>支持基本的富文本编辑功能</li>
          <li><strong>响应式设计：</strong>适配不同屏幕尺寸</li>
        </ul>
      </div>

      <div class="usage-guide">
        <h3>使用指南：</h3>
        <ol>
          <li>在编辑器中输入内容</li>
          <li>选中需要处理的文本</li>
          <li>点击相应的 AI 功能按钮</li>
          <li>等待 AI 处理完成并查看结果</li>
          <li>可以选择插入或替换原文本</li>
        </ol>
      </div>

      <div class="api-reference">
        <h3>组件 Props：</h3>
        <table class="props-table">
          <thead>
            <tr>
              <th>属性名</th>
              <th>类型</th>
              <th>默认值</th>
              <th>说明</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>value / v-model</td>
              <td>String</td>
              <td>''</td>
              <td>编辑器内容</td>
            </tr>
            <tr>
              <td>height</td>
              <td>Number</td>
              <td>300</td>
              <td>编辑器高度（像素）</td>
            </tr>
            <tr>
              <td>showToolbar</td>
              <td>Boolean</td>
              <td>true</td>
              <td>是否显示标准工具栏</td>
            </tr>
            <tr>
              <td>showAIToolbar</td>
              <td>Boolean</td>
              <td>true</td>
              <td>是否显示 AI 工具栏</td>
            </tr>
            <tr>
              <td>aiApp</td>
              <td>String</td>
              <td>'content'</td>
              <td>AI 应用类型</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="methods-reference">
        <h3>组件方法：</h3>
        <table class="methods-table">
          <thead>
            <tr>
              <th>方法名</th>
              <th>参数</th>
              <th>说明</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>getContent()</td>
              <td>-</td>
              <td>获取编辑器 HTML 内容</td>
            </tr>
            <tr>
              <td>setContent(content)</td>
              <td>content: String</td>
              <td>设置编辑器内容</td>
            </tr>
            <tr>
              <td>focus()</td>
              <td>-</td>
              <td>聚焦到编辑器</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import AITiptap from '@/components/AITiptap'

export default {
  name: 'AITiptapDemo',
  components: {
    AITiptap
  },
  data() {
    return {
      content1: '<p>欢迎使用 AI Tiptap 编辑器！这是一个集成了强大 AI 功能的富文本编辑器。</p><p>您可以：</p><ul><li>选中文本后使用 AI 重写功能</li><li>进行段落扩写</li><li>检测重复内容</li><li>使用 AI 助手生成内容</li></ul>',
      content2: '<p>这个编辑器只显示 AI 工具栏，专注于 AI 功能。</p>',
      content3: '<p>这个编辑器只显示标准工具栏，提供基本的富文本编辑功能。</p>',
      content4: '<p>这是一个高度为 400px 的编辑器，适合编写长文档。</p><p>您可以在这里体验所有的 AI 功能。</p>'
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.demo-section {
  max-width: 1200px;
  margin: 0 auto;
}

.demo-item {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.demo-item h3 {
  margin-top: 0;
  color: #303133;
}

.content-preview {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.content-preview h4 {
  margin-top: 0;
  color: #606266;
}

.feature-list {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f0f9ff;
  border-radius: 4px;
  border-left: 4px solid #409eff;
}

.feature-list ul {
  margin: 10px 0;
  padding-left: 20px;
}

.feature-list li {
  margin-bottom: 8px;
}

.usage-guide {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f0f4f8;
  border-radius: 4px;
  border-left: 4px solid #67c23a;
}

.usage-guide ol {
  margin: 10px 0;
  padding-left: 20px;
}

.usage-guide li {
  margin-bottom: 8px;
}

.api-reference,
.methods-reference {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #fafafa;
  border-radius: 4px;
}

.props-table,
.methods-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.props-table th,
.props-table td,
.methods-table th,
.methods-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

.props-table th,
.methods-table th {
  background-color: #f5f7fa;
  font-weight: 600;
  color: #303133;
}

.props-table td:first-child,
.methods-table td:first-child {
  font-family: 'Monaco', 'Menlo', monospace;
  color: #e6a23c;
  font-weight: 600;
}

h2 {
  color: #303133;
  margin-bottom: 20px;
}

h3 {
  color: #606266;
  margin-bottom: 15px;
}

p {
  color: #606266;
  line-height: 1.6;
}
</style>
